<script setup>
import {computed, getCurrentInstance, onMounted, reactive, ref} from 'vue'
import dayjs from "dayjs";
import KingUploader from "@/components/KingUploader.vue";
import AutoCompleteUser from "@/components/AutoComplete-User.vue";
import DictQuantifySelector from "@/components/DictQuantifySelector.vue";
import {CheckOutlined, CloseOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import GlobalParas from "@/GlobalParas.js";
import axios from "axios";

let props = defineProps({
  isWinOpen: {
    type: Boolean,
    default: false
  },
  performanceObj: {
    type: Object,
    default: {}
  },
  openType: {
    type: String,
    default: "add"
  }
})

let emit = defineEmits(["update:isWinOpen", "operSuccess"]);

// console.log(props)


let perfor_Obj = reactive(props.performanceObj)
Object.assign(perfor_Obj, props.performanceObj)

if (props.openType === "add") {
  perfor_Obj.finish_time = dayjs().format("YYYY-MM-DD")
  perfor_Obj.quantify_title = ""
  perfor_Obj.comments = ""
  perfor_Obj.users = []
  perfor_Obj.marks = []
  perfor_Obj.fileList = []
  perfor_Obj.selectedQuantifyItem = {}
}


let openFlag = ref(false)

function closeWin() {
  // console.log(openFlag.value)
  openFlag.value = false
}

function openWin() {
  openFlag.value = true
}

function markChangeHandle(event, index) {
  // console.log(event)
  // console.log(index)
  // console.log(totalMarks.value)
  if (perfor_Obj.users[index].tableKey === undefined) {
    message.error("请先选择分配人");
    perfor_Obj.marks[index] = "";
  }

  if (totalMarks.value > perfor_Obj.selectedQuantifyItem.marks) {
    message.error("分配分值不得超过业绩总分。");
    perfor_Obj.marks[index] = "";
  }
}

let addInitNum = 10 - perfor_Obj.users.length;
// console.log(addInitNum)
for (let i = 0; i < addInitNum; i++) {
  perfor_Obj.users.push({})
}

let totalMarks = computed(function () {
  const sum = perfor_Obj.marks.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  return sum;
})


let disableFlag = computed(function () {
  return perfor_Obj.selectedQuantifyItem.tableKey === undefined;
})

function submitOper() {

  let isPassCheck = checkAviable()
  if (isPassCheck) {

    perfor_Obj.users = perfor_Obj.users.filter((user) => {
      return user.realName !== '';
    })
    console.log(perfor_Obj.users)

    perfor_Obj.marks = perfor_Obj.marks.filter((mark) => {
      return mark !== null
    })

    perfor_Obj.fileList = perfor_Obj.fileList.filter((file) => {
      return file.status !== 'removed';
    })
    console.log(perfor_Obj.fileList)

    let paras = {}
    perfor_Obj.userId = "1"
    paras.param = JSON.stringify(perfor_Obj)
    // console.log(paras.param)
    if (props.openType === "add") {
      axios.post(GlobalParas.postUrl + "/workPerformance/addWorkPerformance", paras).then(res => {
        if (res.data === "success") {
          message.success("业绩保存成功")
          emit("update:isWinOpen", false);
          emit("operSuccess",'ok')
        } else {
          message.error(res.data)
        }
      })
    }
    if (props.openType === "edit") {
      axios.post(GlobalParas.postUrl + "/workPerformance/editWorkPerformance", paras).then(res => {
        if (res.data === "success") {
          message.success("业绩编辑成功")
          emit("update:isWinOpen", false);
          emit("operSuccess",'ok')
        } else {
          message.error(res.data)
        }
      })

    }
  }
}

function checkAviable() {
  let passCheckFlag = true;
  if (perfor_Obj.finish_time === undefined) {
    message.error("完成时间没有填写");
    passCheckFlag = false;
  }

  if (perfor_Obj.quantify_title === "") {
    message.error("业绩标题不能为空");
    passCheckFlag = false;
  }

  if (perfor_Obj.selectedQuantifyItem.tableKey === undefined) {
    message.error("业绩分类还没有选择");
    passCheckFlag = false;
  }

  if (totalMarks.value !== perfor_Obj.selectedQuantifyItem.marks) {
    message.error("分值尚未分配完毕");
    passCheckFlag = false;
  }

  if (perfor_Obj.fileList.length === 0) {
    message.error("尚未上传附件");
    passCheckFlag = false;
  }

  return passCheckFlag;
}

function closeParentWin() {
  emit("update:isWinOpen", false);
}

</script>

<template>
  <a-row>
    <a-col :span="6">
      <a-row style="height: 50px;line-height: 50px;padding: 0 5px 0 5px">
        <a-col :span="16" style="text-align: center;background: #e0ebff">参与人</a-col>
        <a-col :span="8" style="text-align: center;background: #e0ebff">分值</a-col>
      </a-row>
      <a-row v-for="(item, index) in perfor_Obj.users">
        <a-col :span="18" style="padding: 5px">
          <AutoCompleteUser
              v-model:selected-user="perfor_Obj.users[index]"
              :disableFlag="disableFlag"
          >
          </AutoCompleteUser>
        </a-col>
        <a-col :span="6" style="padding:5px 5px 5px 0">
          <a-input-number
              :min="1"
              :max="100"
              v-model:value="perfor_Obj.marks[index]"
              :componentIndex="index"
              :disabled="disableFlag"
              @change="(a) => markChangeHandle(a, index)"
              style="width:100%;">

          </a-input-number>
        </a-col>
      </a-row>
      <a-row style="padding: 0 5px 0 5px">
        <a-col :span="16" class="summaryInfo">
          合计
        </a-col>
        <a-col :span="8" class="summaryInfo">
          {{ totalMarks }}
        </a-col>
      </a-row>
    </a-col>
    <a-col :span="18">
      <a-row :gutter="[0,8]">
        <a-col :span="3" class="input-title">
          完成时间
        </a-col>
        <a-col :span="5" class="input-content">
          <a-date-picker
              v-model:value="perfor_Obj.finish_time"
              value-format="YYYY-MM-DD" style="width:100%"/>
        </a-col>
        <a-col :span="3" class="input-title">
          业绩标题
        </a-col>
        <a-col :span="13" class="input-content">
          <a-input v-model:value="perfor_Obj.quantify_title"></a-input>
        </a-col>
        <a-col :span="3" class="input-title">
          业绩分类
        </a-col>
        <a-col :span="21" class="input-content">
          <a-button type="primary" @click="openWin" style="float:left;margin-top: 8px">请点击选择</a-button>
          <div class="quantifyInfo">
            {{ perfor_Obj.selectedQuantifyItem.quantifyRule }}
            ({{ perfor_Obj.selectedQuantifyItem.marks }})
          </div>
          <a-modal v-model:open="openFlag" width="800px" @ok="closeWin">
            <DictQuantifySelector
                v-model:selected-quantify-item="perfor_Obj.selectedQuantifyItem"
            >
            </DictQuantifySelector>
          </a-modal>

        </a-col>
        <a-col :span="3" class="input-title" style="height: 285px;line-height: 35px;">
          备注说明
        </a-col>
        <a-col :span="21" class="input-content" style="height: 285px">
          <a-textarea v-model:value="perfor_Obj.comments" style="height: 275px;margin-top: 3px"></a-textarea>
        </a-col>

        <a-col :span="24">
          <KingUploader v-model:files="perfor_Obj.fileList"></KingUploader>
        </a-col>

      </a-row>
    </a-col>
  </a-row>

  <a-row>
    <a-col :span="24" style="text-align: right">
      <a-button type="primary" style="margin-right:10px" @click="submitOper">
        <CheckOutlined/>
        确 定
      </a-button>

      <a-button @click="closeParentWin">
        <CloseOutlined/>
        关闭
      </a-button>
    </a-col>
  </a-row>
</template>

<style scoped>
.input-title {
  background: #e0ebff;
  height: 50px;
  line-height: 50px;
  font-size: 12pt;
  text-align: right;
  padding-right: 5px;
}

.input-content {
  height: 50px;
  line-height: 50px;
  font-size: 12pt;
  border: 1px solid #e0ebff;
  padding-left: 5px;
  padding-right: 5px;
}

.quantifyInfo {
  font-size: 10pt;
  float: left;
  width: calc(100% - 120px);
  height: 50px;
  line-height: 120%;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.summaryInfo {
  text-align: center;
  color: red;
  font-size: 12pt;
  background: #e0ebff;
  height: 40px;
  line-height: 40px
}

a-row {
  margin-top: 5px;
}
</style>